import React, { useState, useEffect } from "react";
import { Form, Select, Input, TimePicker, Radio, Row, Col } from 'antd';
const { Option } = Select;

import UploadGroup from '../upload/UploadGroup';


function DetailDesView({ prop, onChange }) {
    let [ data, setData ] = useState({ hasDetailDesc: 0, detailDesc: '', imgs: {} });

    let changeHandler = (k, v) => {
        setData({ ...data, [k]: v });
        onChange(data);
    };

    let getImgs = (k, v) => {
        setData({ ...data, imgs: v });
        onChange(data);
    };
    return (
        <div>
            <Form.Item
                label="是否添加详细描述"
                labelCol={{ span: 6 }}
            >
                <Radio.Group
                    onChange={(v) => {changeHandler('hasDetailDesc', v.target.value)}}
                    value={data.hasDetailDesc}
                >
                    <Radio value={1}>是</Radio>
                    <Radio value={0}>否</Radio>
                </Radio.Group>
            </Form.Item>
            {
                !!data.hasDetailDesc &&
                (
                    <div>
                        <Form.Item
                            label="详细说明"
                            labelCol={{ span: 4 }}
                        >
                            <Input.TextArea rows={4}
                                            onChange={(v) => {changeHandler('detailDesc', v.target.value)}}
                                            value={data.detailDesc}
                            />
                        </Form.Item>
                        <div className="detail-img-box">
                            <UploadGroup
                                span={5}
                                onChange={getImgs}
                            >
                            </UploadGroup>
                            <p>每天行程配图最多4张，请务必保证上传的图片尺寸最佳为750px宽,图片大小不能超过500K,以此适配手机端、电脑端</p>
                        </div>
                    </div>
                )
            }
        </div>
    );
}

let DetailDes = React.memo(DetailDesView);

export default DetailDes;